<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>更新页面</title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <style>
            .selected_class{
                box-shadow: 3px 3px 6px rgba(85, 154, 227, 0.4);
                border: 2px solid #2d8cf0;
            }
            .ellipsis {
                overflow: hidden; /* 确保超出容器的文本被隐藏 */
                white-space: nowrap; /* 确保文本在一行内显示 */
                text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
            }
        </style>
    </head>
    <body>

        <form class="layui-form">

            <div class="mainBox">
                <div class="main-container mr-5">
                    <div style="display: flex;flex-direction: row;align-items: center">
                        <div class="layui-form-item" style="width: 45%">
                            <label class="layui-form-label">采样器：</label>
                            <div class="layui-input-block">
                                <tip style="color: red;font-size: 12px">一行一个</tip>
                                <textarea name="samplers" class="layui-textarea" rows="8" cols="20"><?=htmlspecialchars($samplers)?></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="width: 45%">
                            <label class="layui-form-label">步长：</label>
                            <div class="layui-input-block">
                                <tip style="color: red;font-size: 12px">一行一个</tip>
                                <textarea name="steps" class="layui-textarea" rows="8" cols="20"><?=htmlspecialchars($steps)?></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模型风格：</label>
                        <div class="layui-input-block model_html"  style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                            <div class="model_click"  data-id="1" style="width: 100px;height: 120px;margin-right: 20px;">
                                <img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/local/stable_diffusion_image/20240513/png/0b52503b7725942befdf.png" style="width: 100px;height: 100px;">
                                <div>实打实大苏打</div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center">
                        <div class="layui-form-item" style="width: 95%">
                            <label class="layui-form-label">英文描述：</label>
                            <div class="layui-input-block">
                                <textarea name="prompt" class="layui-textarea" rows="4" cols="100" style="width: 100%"><?=htmlspecialchars($prompt)?></textarea>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center">
                        <div class="layui-form-item" style="width: 95%">
                            <label class="layui-form-label">AI图像指令：</label>
                            <div class="layui-input-block">
                                <textarea name="ai_image_command" class="layui-textarea" rows="12" cols="100" style="width: 100%"><?=htmlspecialchars($ai_image_command)?></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <button type="button" class="pear-btn pear-btn-primary pear-btn-md"  lay-submit="" lay-filter="regenerate_image">
                            生成图片
                        </button>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">生成图片：</label>
                        <div class="layui-input-block ai_image_html">
                            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-items: center;align-items : center;margin-bottom:16px;">
                                <!--<div style="width: 150px;">wqwqwqwqwq</div>-->
                                <!--<div style="width: 100px;">qwqwq</div>-->
                                <!--<div style="display: flex;flex-direction: column; margin-right: 10px;">-->
                                    <!--<div>补充</div>-->
                                    <!--<img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/test/stable_diffusion_image/20240525/png/dd0f8fb1304d84dd37ac.png" onclick="open_image(this);" style="width: 200px;height: 265px;">-->
                                    <!--<div>秒数</div>-->
                                <!--</div>-->
                                <!--<div style="display: flex;flex-direction: column; margin-right: 10px;">-->
                                    <!--<div>20</div>-->
                                    <!--<div style="border: #666666 1px solid;width: 200px;height: 265px;">图像加载中...</div>-->
                                    <!--&lt;!&ndash;<img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/test/stable_diffusion_image/20240525/png/dd0f8fb1304d84dd37ac.png" onclick="open_image(this);" style="width: 200px;height: 265px;">&ndash;&gt;-->
                                    <!--<div style="display: flex;flex-direction: row; justify-content: space-between;">-->
                                        <!--<span>12秒</span>-->
                                        <!--<a href="javascript:;" onclick="view(this)" data-content="4234234">参数预览</a>-->
                                        <!--<a href="javascript:;" onclick="view(this)" data-content="423423423423">响应预览</a>-->
                                    <!--</div>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom">
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
                        提交
                    </button>
                    <!--<button type="reset" class="pear-btn pear-btn-md">-->
                        <!--重置-->
                    <!--</button>-->
                </div>
            </div>
            
        </form>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/functions.js"></script>
        <script src="/app/admin/admin/js/md5.js"></script>
        
        <script>
            let modelidStr = '<?=$modelids?>';
            let modelids = JSON.parse(modelidStr);

            // 相关接口
            const AI_REGENERATE_API = "/app/admin/image/test/regenerateimage";
            const PROGRESS_API = "/app/admin/index/getaiimageresult";
            const UPDATE_API = "/app/admin/image/test/update";

            // 获取数据库记录
            let modelData = [];
            layui.use(["form", "util", "popup"], function () {
                $ = layui.$;
                layui.$.ajax({
                    url: "/app/admin/image/index/select?limit=1000&status=1",
                    dataType: "json",
                    async:true,
                    headers: get_header({"status":"1"}),
                    success: function (res2) {
                        if (res2.code) {
                            return layui.popup.failure(res.msg);
                        }
                        let html = '';
                        modelData = res2.data;
                        layui.$.each(res2.data,function (i,v) {
                            let selected = '';
                            let modelid = String(v.id);
                            if(modelids.indexOf(modelid)>-1){
                                selected = 'selected_class';
                            }
                            html += ' <div class="model_click '+selected+'" data-id="'+modelid+'" style="width: 100px;height: 120px;margin-right: 20px;">\n' +
                                '           <img src="'+v.image+'" style="width: 100px;height: 100px;" title="'+v.model+'">\n' +
                                '           <div class="ellipsis">'+v.name+'</div>\n' +
                                '  </div>';
                        })
                        layui.$('.model_html').html(html);
                    }
                });

                $('.model_html').delegate('.model_click','click',function () {
                    let modelid = String($(this).data('id'));
                    let ishas = false;
                    layui.$.each(modelids,function (i,v) {
                        if(v==modelid){
                            ishas = true;
                            modelids.splice(i,1);
                        }
                    })
                    if(ishas==false){
                        modelids.push(modelid);
                    }

                    let tempIds = [];
                    layui.$.each(modelids,function (i,v) {
                        tempIds.push(v);
                    })
                    modelids = tempIds

                    let html = '';
                    layui.$.each(modelData,function (i,v) {
                        let selected = '';
                        let modelid = String(v.id);
                        if(modelids.indexOf(modelid)>-1){
                            selected = 'selected_class';
                        }
                        html += ' <div class="model_click '+selected+'" data-id="'+modelid+'" style="width: 100px;height: 120px;margin-right: 20px;">\n' +
                            '           <img src="'+v.image+'" style="width: 100px;height: 100px;" title="'+v.model+'">\n' +
                            '           <div class="ellipsis">'+v.name+'</div>\n' +
                            '  </div>';
                    })
                    layui.$('.model_html').html(html);
                })
            });

            //提交事件
            layui.use(["form", "popup","loading"], function () {
                layui.form.on("submit(save)", function (data) {
                    data.field.modelids = modelids;
                    let loading = layer.load();
                    layui.$.ajax({
                        url: UPDATE_API,
                        type: "POST",
                        dateType: "json",
                        data: data.field,
                        async:true,
                        headers: get_header(data.field),
                        success: function (res) {
                            layer.close(loading);
                            if (res.code) {
                                return layui.popup.failure(res.msg);
                            }
                            return layui.popup.success("操作成功", function () {
                            });
                        }
                    });
                    return false;
                });

                layui.form.on("submit(regenerate_image)", function (data) {
                    if(modelids.length==0){
                        return layui.popup.failure('模型风格必选');
                    }
                    data.field.modelids = modelids;

                    let loadIndex = layui.loading.Load(1, "生成中...");
                    let requestids = [];
                    layui.$.ajax({
                        url: AI_REGENERATE_API,
                        type: "POST",
                        dateType: "json",
                        data: data.field,
                        async:false,
                        headers: get_header(data.field),
                        success: function (res) {
                            layui.loading.loadRemove(1);
                            if (res.code) {
                                return layui.popup.failure(res.msg);
                            }

                            let html = '';
                            layui.$.each(res.data.data,function (i,v) {
                                html += '<div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-items: center;align-items : center;margin-bottom:16px;">\n' +
                                    '         <div style="width: 150px;margin-right: 10px;">'+v.model+'</div>\n' +
                                    '         <div style="width: 100px;margin-right: 10px">'+v.sampler+'</div>\n';
                                    layui.$.each(v.list,function (ii,vv) {
                                        html +='<div class="'+vv.requestid+'" style="display: flex;flex-direction: column; margin-right: 10px;">\n' +
                                            '     <div>步长: '+vv.step+'</div>\n' +
                                            '     <div class="'+vv.requestid+'_image_loading" style="border: #666666 1px solid;width: 200px;height: 265px;">图像加载中....</div>\n' +
                                            //'      <img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/test/stable_diffusion_image/20240525/png/dd0f8fb1304d84dd37ac.png" onclick="open_image(this);" style="width: 200px;height: 265px;">\n' +
                                            '      <div class="'+vv.requestid+'_image_loading">0</div>\n' +
                                            '</div>';
                                    })
                                html +='</div>';

                            })
                           $('.ai_image_html').html(html);

                            requestids = res.data.requestids;
                        },
                        error:function () {
                            layui.loading.loadRemove(1);
                            return layui.popup.failure('请求失败');
                        }
                    });
                    //console.log(requestids)
                    if(requestids.length>0){
                        layui.$.each(requestids,function (i,requestid) {
                            let timer = setInterval(function(){
                                layui.$.ajax({
                                    url: PROGRESS_API+'?requestid='+requestid,
                                    dataType: "json",
                                    type: "get",
                                    async: true,
                                    headers: get_header({"requestid": requestid}),
                                    success: function (res2) {
                                        if (res2.code) {
                                            clearInterval(timer);
                                            layui.$('.'+requestid+'_image_loading').text(res2.msg);
                                            return layui.popup.failure(res2.msg);
                                        } else {
                                            let images = res2.data.images
                                            if(images.length>0){
                                                clearInterval(timer);
                                                return layui.popup.success("加载成功", function () {
                                                    let html2 = '';
                                                    layui.$.each(images,function (ii,vv) {
                                                        if(vv){
                                                            var imgObj = new Image();                    //新建一个图片对象
                                                            imgObj.src = vv;                            //将图片的src属性赋值给新建图片对象的src
                                                            imgObj.onload = function () {
                                                                var size =  new Array(imgObj.width, imgObj.height);

                                                                size[1] = parseInt(200/size[0]*size[1])
                                                                html2 +='<img src="'+vv+'" onclick="open_image(this);" style="width: 200px;height: '+size[1]+'px;">';
                                                                html2 += '<div style="display: flex;flex-direction: row; justify-content: space-between;">\n' +
                                                                    '        <span>'+res2.data.tts+'秒</span>\n' +
                                                                    '        <a href="javascript:;" onclick="view(\''+compile(res2.data.param)+'\')">参数预览</a>\n' +
                                                                    '        <a href="javascript:;" onclick="view(\''+compile(res2.data.result)+'\')">响应预览</a>\n' +
                                                                    '    </div>';

                                                                layui.$('.'+res2.data.requestid+'_image_loading').remove();
                                                                layui.$('.'+res2.data.requestid).append(html2);
                                                            }
                                                        }
                                                    })
                                                });
                                            }
                                        }
                                    },
                                    error:function () {
                                        layui.$('.'+requestid+'_image_loading').text('请求失败');
                                        return layui.popup.failure('请求失败');
                                    }
                                });
                            }, 3000);
                        })
                    }

                    return false;
                });
            });
            window.view = function (content) {
                layer.open({
                    type: 1,
                    title: "预览",
                    shade: 0.1,
                    maxmin: true,
                    shadeClose:true,
                    area: ["900px", "500px"],
                    content: '<div style="margin: 20px;font-size: 16px;letter-spacing: 2px;">  <textarea disabled rows="23" style="height: 100%;width: 100%">'+uncompile(content)+'</textarea></div>'
                });
            }
        </script>

    </body>

</html>
